let headerApp = {
  template: `
    <!-- pc导航 -->
		<div class="header_bg">
			<div class="header clear">
				<div class="logo"><a href="index.html"><img :src="site.pc_logo" alt=""></a></div>
				<div class="nav_box clear">
					<div class="search_pic">
						<img src="images/search.png" alt="">
						<div class="search_line"></div>
					</div>
					<div class="nav">
						<ul>
							<li><a href="index.html">Home</a></li>
							<template v-for="(item,index) in navList">

								<li class="nav_on" v-if="item.id == '652c86d5a0cccc308d4e71bf'">
									<a :href="item.link+'&nav_id='+item.id">{{item.title}}<img src="images/arrow.png" alt=""></a>
									<div class="subnav" v-if="item.id == '652c86d5a0cccc308d4e71bf'">
										<ul>
											<li v-for="(it,k) in type">
												<a :href="'product.html?category_id='+it.id+'&nav_id=652c86d5a0cccc308d4e71bf&ac='+k">{{it.title}}</a>
                        <div class="subnav02">
                          <ul>
                            <li v-for="itt in it.children">
                              <a :href="'product.html?category_id='+itt.id+'&nav_id=652c86d5a0cccc308d4e71bf&ac='+k">{{itt.title}}</a>
                            </li>
                          </ul>
                        </div>
											</li>
										</ul>
									</div>
								</li>

								<li v-else> <a :href="item.link+'&nav_id='+item.id">{{item.title}}</a></li>
                               
							</template>
						</ul>
						<div class="cl"></div>
					</div>
				</div>
			</div>
			
		</div>
		<div class="searchboxinput">
			<input type="text" id="key" placeholder="please enter" v-model="keywords"
			@keydown.enter="searchByKeywords">
			<span class="search_btn" @click="searchByKeywords">SEARCH</span>
		</div>
		<div class="searchbox"></div>

		<!-- 手机导航 -->
		<div class="head">
			<div class="logo"><a href="index.html"><img :src="site.phone_logo" alt=""></a></div>
			<div class="search_pic">
				<img src="images/search02.png" alt="">
			</div>
			<input type="checkbox" id="menu" />
			<label for="menu" class="menu">
				<span></span>
				<span></span>
				<span></span>
			</label>
			<div class="nav02">
				<ul>
					<li><a href="index.html">Home</a></li>
					<template v-for="(item,index) in navList">
					<li>
						<a :href="item.link+'&nav_id='+item.id">{{item.title}}</a>
						<div class="nav03" v-if="item.id == '652c86d5a0cccc308d4e71bf'">
							<ul>
								<li v-for="it in type">
                  <a :href="'product.html?category_id=65372a43f5cb1f54e276a5e6&type_id='+it.id+'&nav_id=652c86d5a0cccc308d4e71bf'">{{it.title}}</a>
                  <div class="nav04" v-if="item.id == '652c86d5a0cccc308d4e71bf'">
                    <ul>
                      <li v-for="itt in it.children">
                        <a :href="'product.html?category_id=65372a43f5cb1f54e276a5e6&type_id='+itt.id+'&nav_id=652c86d5a0cccc308d4e71bf'"><i></i>{{itt.title}}</a>
                      </li>
                    </ul>
                  </div>
                </li>
							</ul>
						</div>
					</li>
					</template>
				</ul>
				<div class="cl"></div>
			</div>
		</div>

	`,
  props: {
    i: String,
  },
  setup(props) {
    let nav_id = getUrlParam('nav_id')
    let navList = Vue.ref([]) //导航
    let site = Vue.ref([]) //站点信息
    let type = Vue.ref([]) //分类

    const getNav = () => {
      requestData(
        'navigation',
        {
          data_type: 'list',
          limit: '9',
          list_type: 'children',
          sort: 'sortAsc',
          category_id: '0',
        },
        (res) => {
          // res 根据条件筛选的数据
          //console.log(res);
          navList.value = res
        },
      )
    }


    

    const getsite = () => {
      requestData('site', null, (res) => {
        // res 数据
        //console.log(res);
        site.value = res
        changeWebInfo(site.value) //动态修改网站信息
      })
    }

    // 分类
    const gettype = () => {
      requestData(
        'category',
        {
          data_type: 'list',
          list_type: 'children',
          limit: '100',
          //category_id: '65372a43f5cb1f54e276a5e6',
          category_id: '0',
          sort: 'sortAsc',
          type: 'goods',
        },
        function (res) {
          console.log(res);
          type.value = res
        },
      )
    }

    // 搜索
    const keywords = Vue.ref('')
    const searchByKeywords = () => {
      if (keywords.value == '') {
        alert('请输入搜索内容')
        return false
      }
      window.location.href =
        './search_list.html?nav_id=652c86d5a0cccc308d4e71bf&keywords=' + keywords.value
    }

    //监听事件 site
    Vue.watch(site, () => {
      Vue.nextTick(() => {
        $('.search_pic').click(function () {
          $('.searchboxinput').show()
          $('.searchboxinput').addClass('on1')
          $('.searchbox').addClass('on1')
        })
        $('.searchbox').click(function () {
          $('.searchboxinput').hide()
          $('.searchboxinput').removeClass('on1')
          $('.searchbox').removeClass('on1')
        })

        var mySwiper = new Swiper('.subnav', {
          loop: true,
          speed: 700,
          slidesPerView: 7,
        })
      })
    })

    //监听事件 navList
    Vue.watch(navList, () => {
      Vue.nextTick(() => {
        $('.nav_on').mouseenter(function () {
          $('.subnav_box').addClass('on')
        })
        $('.subnav_box').mouseleave(function () {
          $(this).removeClass('on')
        })
      })
    })

    Vue.onMounted(() => {
      getsite()
      getNav()
      gettype()
    })

    return {
      nav_id,
      navList,
      site,
      type,
      searchByKeywords,
      keywords,
    }
  },
}
